<template>
  <div class="boxs">
    <div class="content">
      <!-- 行业选择弹框 -->
      <el-cascader
        collapse-tags
        clearable
        ref="postSelectIndustryTypeRef"
        :props="{
          expandTrigger: 'hover',
          multiple: true,
        }"
        v-model="remit.industryType"
        :show-all-levels="false"
        placeholder="试试搜索：制造业"
        :options="industryInfo"
        filterable
        @change="industry($event)"
      ></el-cascader>
      <!-- 行业选择弹框 -->
      <el-cascader
        collapse-tags
        clearable
        ref="postSelectRef"
        :props="{
          expandTrigger: 'hover',
          multiple: true,
        }"
        :value="remit.cityData"
        :show-all-levels="false"
        placeholder="试试搜索：上海市"
        :options="cityData"
        filterable
        @change="cityStry($event)"
      >
        <!--           emitPath: false, -->
      </el-cascader>
      <h1 v-show="cn">{{ cn }}</h1>
      <h1 v-show="cityCN">{{ cityCN }}</h1>
      <!-- ----------- -->
      <!-- <el-cascader
        class="cascader"
        @change="handleChange"
        ref="cascade"
        :options="industryInfo"
        :props="props"
        clearable
        :popper-class="'hide'"
      ></el-cascader> -->
    </div>
  </div>
</template>

<script>
import { industryInfo, cityData } from "@/utils/option.js";
export default {
  data() {
    return {
      preValue: [],
      industryInfo: industryInfo,
      cn: "",
      Code: "",
      cityData: cityData,
      cityCN: "",
      cityCode: "",
      cityQuantity: [], //城市数量统计
      remit: {
        industryType: null,
        cityData: null,
      },
      props: { multiple: true, expandTrigger: "click" },
      options: [
        {
          value: "东南",
          label: "东南",
          children: [
            {
              value: "上海",
              label: "上海",
              children: [
                { value: "普陀", label: "普陀" },
                { value: "黄埔", label: "黄埔" },
                { value: "徐汇", label: "徐汇" },
              ],
            },
            {
              value: "江苏",
              label: "江苏",
              children: [
                { value: "南京", label: "南京" },
                { value: "苏州", label: "苏州" },
                { value: "无锡", label: "无锡" },
              ],
            },
            {
              value: "浙江",
              label: "浙江",
              children: [
                { value: "杭州", label: "杭州" },
                { value: "宁波", label: "宁波" },
                { value: "嘉兴", label: "嘉兴" },
              ],
            },
          ],
        },
        {
          value: 17,
          label: "西北",
          children: [
            {
              value: 18,
              label: "陕西",
              children: [
                { value: 19, label: "西安" },
                { value: 20, label: "延安" },
              ],
            },
            {
              value: 21,
              label: "新疆维吾尔族自治区",
              children: [
                { value: 22, label: "乌鲁木齐" },
                { value: 23, label: "克拉玛依" },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 选择行业类型
    industry(val) {
      let CheckedNodes = this.$refs.postSelectIndustryTypeRef.getCheckedNodes();
      CheckedNodes = CheckedNodes.filter(
        (option) => !(option.parent && option.parent.checked)
      );
      let a = [];
      let industryTypeCN = [];
      let industryTypeCode = [];
      for (let i = 0; i < CheckedNodes.length; i++) {
        industryTypeCode.push(CheckedNodes[i].value.split("-")[0]);
        industryTypeCN.push(CheckedNodes[i].value.split("-")[1]);
      }
      this.cn = industryTypeCN.join(",");
      this.Code = industryTypeCode.join(",");
    },
    cityStry(val) {
      let CheckedNodes = this.$refs.postSelectRef.getCheckedNodes();
      CheckedNodes = CheckedNodes.filter(
        (option) => !(option.parent && option.parent.checked)
      );
      let cityCN = [];
      let cityCode = [];
      let value = [];
      let cityQuantity = [];
      for (let i = 0; i < CheckedNodes.length; i++) {
        cityCode.push(CheckedNodes[i].value.split("-")[0]);
        cityCN.push(CheckedNodes[i].value.split("-")[1]);
        value.push(CheckedNodes[i].label);
      }
      value.forEach((item) => {
        if (
          item == "北京" ||
          item == "天津" ||
          item == "河北" ||
          item == "山西" ||
          item == "内蒙古" ||
          item == "辽宁" ||
          item == "吉林" ||
          item == "黑龙江" ||
          item == "上海" ||
          item == "江苏" ||
          item == "浙江" ||
          item == "安徽" ||
          item == "福建" ||
          item == "江西" ||
          item == "山东" ||
          item == "河南" ||
          item == "湖北" ||
          item == "湖南" ||
          item == "广东" ||
          item == "广西" ||
          item == "海南" ||
          item == "重庆" ||
          item == "四川" ||
          item == "贵州" ||
          item == "云南" ||
          item == "西藏" ||
          item == "陕西" ||
          item == "甘肃" ||
          item == "青海" ||
          item == "宁夏" ||
          item == "新疆"
        ) {
          cityQuantity.push(item);
        }
      });
      this.cityQuantity = cityQuantity;
      if (this.cityQuantity.length > 5) {
        this.$Message.error("一级最多选择5项");
        this.$nextTick(() => {
          const last = val[val.length - 1];
          this.$refs.postSelectRef.checkedValue = this.remit.cityData;
          this.$refs.postSelectRef.computePresentContent();
          const nodes = [
            this.$refs.postSelectRef.$refs.panel.getNodeByValue(last),
          ];
          while (nodes[0].parent) {
            nodes.unshift(nodes[0].parent);
          }
          this.$nextTick(() => {
            this.$refs.postSelectRef.$refs.panel.expandNodes(nodes);
          });
        });
        return;
      }
      this.cityCN = cityCN.join(",");
      this.cityCode = cityCode.join(",");
      this.remit.cityData = val;
    },
    // ----------------
    handleChange(val) {
      if (this.preValue.length > 0 && val.length > this.preValue.length) {
        let newIndex;
        let i = 0,
          j = 0;
        while (i < val.length && j < this.preValue.length) {
          if (
            val[i][0] === this.preValue[j][0] &&
            val[i][1] === this.preValue[j][1]
          ) {
            i++;
            j++;
          } else {
            //添加在中间的情况
            newIndex = i;
            break;
          }
        }
        //添加在末尾的情况
        if (j === this.preValue.length) {
          newIndex = i;
        }

        let delIndex = val.findIndex(
          (item, index) => index !== newIndex && item[0] === val[newIndex][0]
        );
        if (delIndex >= 0) {
          // 取消选择的节点
          let cancelIndex;
          for (let i = 0; i < this.options.length; i++) {
            if (this.options[i].value === val[delIndex][0]) {
              for (let j = 0; j < this.options[i].children.length; j++) {
                if (this.options[i].children[j].value === val[delIndex][1]) {
                  cancelIndex = j;
                  break;
                }
              }
              break;
            }
          }
          this.$nextTick(() => {
            let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右侧的面板 menu[0]即为左侧的面板
            let liId = document.getElementById(panelId + "-" + cancelIndex);
            liId.children[0].click();
          });
          val[delIndex] = "";
          val = val.filter((item) => item !== "");
        }
      }
      this.preValue = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  width: 100%;
  height: 100vh;
  .content {
    width: 1200px;
    height: 800px;
    margin: 50px auto;
    h1 {
      margin-top: 300px;
    }
  }
  .cascader {
    .el-input__inner {
      width: 362px;
    }

    .el-cascader__tags {
      display: flex;
      flex-wrap: nowrap;
      overflow-y: overlay;
      margin-left: 2px;
    }

    .el-cascader__tags::-webkit-scrollbar {
      width: 0;
      height: 3px;
    }

    /*定义滚动条轨道 内阴影+圆角*/

    .el-cascader__tags::-webkit-scrollbar-track {
      background-color: rgba(186, 203, 227, 0.3);
    }

    /*定义滑块 内阴影+圆角*/

    .el-cascader__tags::-webkit-scrollbar-thumb {
      background-color: #b3c2d7;
    }
  }
}
.hide {
  .el-cascader-menu:first-of-type {
    .el-cascader-node {
      .el-checkbox {
        display: none;
      }
    }
  }
}
::v-deep .el-cascader {
  width: 500px;
}
</style>
